<template>
    <div class="nav-bar">
        <el-menu mode="horizontal" router :ellipsis="false">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/news">创作</el-menu-item>
            <div class="flex items-center">
                <el-avatar :icon="UserFilled"
                    src="https://dsjmage.oss-cn-beijing.aliyuncs.com/dsj_uploads/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250123203357.jpg" />

            </div>
            <el-sub-menu index="2">
                <template #title>{{ userStore.userInfo.nickname }}</template>
                <el-menu-item>个人信息</el-menu-item>
                <el-menu-item @click="signOut">退出登录</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '@/stores/user';
import { removeToken } from '@/utils/auth';
import { UserFilled } from '@element-plus/icons-vue'

const userStore = useUserStore()
// 退出登录
const signOut = () => {
    // 清除本地和pina的token
    userStore.token = ''
    userStore.userInfo = {}
    removeToken()
    // 返回登录页
    router.replace({
        path: '/login'
    })
}
</script>

<style scoped>
.nav-bar {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
}

.el-menu--horizontal>.el-menu-item:nth-child(2) {
    margin-right: auto;
}
</style>